<template>
  <div class="my">
    <div class="top">
      <router-link to="dizhi">
        <span class="iconfont">&#xe601;珠吉街道悦景路金地...></span>
      </router-link>
      <router-link :to="{path:'/home/search',query:{index:1}}">
        <div>
          <p ><span class="iconfont">&#xe651;</span>请输入商户或商品名称</p>
        </div>
      </router-link>
    </div>
    <div class="banner">
      <banner></banner>
    </div>
    <div class="type">
      <router-link :to="{path:'/home/type',query:{type:'cytp'}}">
        <div class="box">
          <img src="../assets/img/type1.png" alt="" />
          <p>茶饮甜品</p>
        </div>
      </router-link>
      <router-link :to="{path:'/home/type',query:{type:'csbl'}}">
        <div class="box">
          <img src="../assets/img/type2.png" alt="" />
          <p>商超便利</p>
        </div>
      </router-link>
      <router-link :to="{path:'/home/type',query:{type:'xysk'}}">
        <div class="box">
          <img src="../assets/img/type3.png" alt="" />
          <p>宵夜烧烤</p>
        </div>
      </router-link>
      <router-link :to="{path:'/home/type',query:{type:'sgdg'}}">
        <div class="box">
          <img src="../assets/img/type4.png" alt="" />
          <p>水果蛋糕</p>
        </div>
      </router-link>
      <router-link :to="{path:'/home/type',query:{type:'bmfw'}}">
        <div class="box">
          <img src="../assets/img/type5.png" alt="" />
          <p>便民服务</p>
        </div>
      </router-link>
    </div>
    <div class="b">
      <bannert></bannert>
    </div>
    <div class="shop">
      <sort></sort>
    </div>
  </div>
</template>
<script>
import banner from "@/components/banner2.vue";
import bannert from "@/components/banner.vue";
import Sort from '@/components/sort.vue';
export default {
  name: "index",
  components: {
    banner,
    bannert,
    Sort
  },
};
</script>
<style lang="scss" scoped>
.my {
  width: 100%;
  .top {
    background-color: rgb(22,187,250);
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 50px;
    a {
      display: block;
      > span {
        width: 50%;
        line-height: 50px;
        border-radius: 12px;
        padding: 7px;
        font-size: 12px;
        background-color: rgba(255, 255, 255,0.5);
      }
      div {
        p {
          width: 160px;
          padding: 4px;
          border-radius: 12px;
          background-color: rgb(250, 250, 250);
          font-size: 12px;
          span {
          }
        }
      }
    }
  }
  .type {
    height: 95px;
    display: flex;
    justify-content: space-around;
    a {
      .box {
        margin-top: 10px;
        img {
          text-align: center;
          width: 55px;
          height: 55px;
        }
        p {
          font-size: 12px;
          padding: 0;
          margin: 0;
        }
      }
    }
  }
}
</style>